<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用axios发送http请求</title>
</head>
<body>
	<div class="container"></div>
</body>
<script src="./libs/15.4.2/react.min.js"></script>
<script src="./libs/15.4.2/react-dom.min.js"></script>
<script src="./libs/15.4.2/babel.min.js"></script>
<script src="./libs/axios.js"></script>
<link rel="stylesheet" href="./libs/bootstrap.css"/>
<script type="text/babel">
/*
	注意：react核心包中并没有提供发送http请求的功能，所以发送http请求需要我们自己去选择第三方的js库
	常见的http工具包:axios、superagent、jquery(如果只是发送http请求，不建议选择，jquery的核心是dom操作)
*/

//创建组件
class CarList extends React.Component{
    constructor(props){
      super(props);
      //初始化state
      this.state={
        list:[]
      }
    }
    
    //组件生命周期函数
    componentDidMount(){
        axios.get(this.props.source).then((res)=>{
          console.log(res);
            this.setState({
              list:res.data.data
            })
        });
    }

    render(){
        return <ul className="list-group"> 
          {this.state.list.map(function(item){
              return <li className="list-group-item">{item.brand}
              ---{item.country}
              <span className="badge">&yen;{item.price}</span>
              </li>
          })}
        </ul>
    }
}

//渲染页面
ReactDOM.render(
  <CarList source="/data.json" />,
  document.querySelector('.container')
);

</script>
</html>